import classnames from "classnames";
import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image} from '@tarojs/components';
import {AtIcon} from 'taro-ui';
import {http} from "../../../../utils/http";
import {TARO_ENV} from "../../../../constants/api";
import "./index.scss";

const navs = [
  {
    id: 1,
    url: "/other/scenicCard/index?uuid=",
    name: "名片",
    icon: "at-icon-icon icon-daren",
    color: "#1FB177",
    size: 20,
    type: 1
  },
  {
    id: 2,
    url: "/common/scenic/detail?itemId=",
    name: "详情",
    icon: "at-icon-icon icon-shangjiashenhe-01",
    color: "#666",
    size: 20,
    type: 1
  },
  {
    id: 3,
    url: "/other/mapNavigation/index?id=",
    name: "地图",
    color: "#666",
    icon: "https://resource.ivcheng.com/upload/images/20220831/1661937820519_688.png",
    type: 2
  },
  {
    id: 4,
    url: "/pages/index/index",
    urlBig: "/pages/index/index",
    name: "商城",
    icon: "iconfont iconfont-icon2qianggou",
    color: "#666",
    size: 22,
    type: 1
  },
  {
    id: 5,
    url: "/pages/my/index/index",
    name: "我的",
    icon: "iconfont iconfont-iconwode",
    color: "#666",
    size: 22,
    type: 1
  }
]

if (process.env.TARO_ENV === 'tt') {
  navs.splice(2, 1)
}

const colorNormal = "#666", colorActive = "#1FB177";

export default function MenuNavs(props) {
  const forwardNav = (item) => {
    props.handleClickMenu(item);
    const {scenicDetail, idx} = props;
    const {uuid, id, wx_guide_url, goods_uuid} = scenicDetail;
    const _uuid = goods_uuid || uuid;
    let urlPath = "";

    switch (item.id) {
      case 1:
        urlPath = `${item.url}${_uuid}`;
        break;
      case 2:
        urlPath = `${item.url}${_uuid}`;
        break;
      case 3:
        Taro.setStorageSync("wx_guide_url", wx_guide_url);
        urlPath = TARO_ENV === "h5" ? `${item.url}${id}&pkeys=${http.getSiteHash()}` : `/other/mapNavigation/webview?id=${id}`;
        break;
      case 4:
        urlPath = item.url;
        break;
      case 5:
        urlPath = item.url;
        break;
    }

    if (props.idx * 1 + 1 === item.id) return; // 当前页面不跳转
    if (TARO_ENV === "weapp" || TARO_ENV === "tt") {
      if (item.id !== 2 && item.id !== 3) {
        Taro.switchTab({
          url: urlPath
        })
      } else {
        Taro.navigateTo({
          url: urlPath
        })
      }
    } else {
      Taro.navigateTo({
        url: urlPath
      })
    }
  }

  return (
    <View className='scenic-nav-box'>
      <View className='scenic-nav'>
        {
          navs.map((item, index) => (
            <View className='sn-item' key={index} onClick={() => forwardNav(item)}>
              {
                item.type === 2 ?
                  <Image
                    src={item.icon}
                    className={classnames({
                      "nav-img": TARO_ENV === "h5",
                      "nav-img-weapp": TARO_ENV === "weapp"
                    })}
                  />
                  :
                  <AtIcon
                    customStyle='position: absolute; top: 8px;left: 50%; transform: translate(-50%, 0);'
                    value={item.icon}
                    size={item.size}
                    color={props.idx === index ? colorActive : colorNormal}
                    className='nav-icon'
                  />
              }
              <View
                className='sni-earth'
                style={{color: props.idx === index ? colorActive : colorNormal}}
              >{item.name}</View>
            </View>
          ))
        }
      </View>
    </View>
  )
}
